<!--#include file="lib/utf-8.asp"-->
<!--#include file="lib/conn.asp"-->
<!--#include file="lib/saferequest.asp"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link rel="stylesheet" href="lib/sheet.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="lib/ui/themes/base/ui.all.css" />
<!-- jquery和ui -->
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/ui/ui.core.js"></script>
<script type="text/javascript" src="lib/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="lib/ui/i18n/ui.datepicker-zh-CN.js"></script>
<script type="text/javascript">
	$(function() {
		$.ajaxSetup ({
			cache: false, //关闭AJAX相应的缓存
			beforeSend:function() {
				$("#loading").css("left",(($(window).width()-32)/2)).css("top",(($(window).height()-32)/2));
				$("#loading").fadeIn();
			},
			complete:function() {
				$("#loading").fadeOut();
			}
		});
		$.datepicker.setDefaults({
			changeMonth: true,
			changeYear: true
		});
		$(".datepicker").datepicker();
		$.ajax({
			type: "get",
			url: "cha.asp",
			dataType: "json",
			success: function(data){
						//alert(data);
						//var json = eval('(' + data + ')');
						//alert(json[0].tyr);
						//for (var i=0;i<data.length;i++ ) $("#tyr").append("<option value='"+data[i].tyr+"'>"+data[i].tyr+"</option>");
					var tyrselect="<select id='tyr' name='tyr'><option value='托运人'>托运人</option>";
					for (var i=0;i<data.tyr.length;i++ ) tyrselect+="<option value='"+data.tyr[i].tyr+"'>"+data.tyr[i].tyr+"</option>";
					tyrselect+="</select>";
					var cyrselect="<select id='cyr' name='cyr'><option value='承运人'>承运人</option>";
					for (var i=0;i<data.cyr.length;i++ ) cyrselect+="<option value='"+data.cyr[i].clid+"'>"+data.cyr[i].clm+"</option>";
					cyrselect+="</select>";
					var cdselect="<select id='cd' name='cd'><option value='车队'>车队</option>";
					for (var i=0;i<data.cd.length;i++ ) cdselect+="<option value='"+data.cd[i].cdid+"'>"+data.cd[i].cdm+"</option>";
					cdselect+="</select>";
					$("#cha").html(tyrselect+" "+cyrselect+" "+cdselect+" ");
			}
		});
		var p=1;
		function vi(p){
			$.get("cbsearch_page.asp?page="+p+"&"+$("#cbsearch").serialize(),function(data){	//用ajax的get方式提交
				$("#cbsearch_main").html(data);
				$(".contable").addClass("ct");	//载入table样式
				$(".contable th").addClass("ch");	//载入th样式
				$(".contable td").addClass("cd");	//载入td样式

				$(".contable tbody tr:odd").addClass("alt");	//对表格主体内单数行进行样式应用

				$(".contable tbody tr").mouseover(function(){	//对返回的dom进行mouseowver事件捕获
					$(this).toggleClass("over");	//添加css样式
				}).mouseout(function(){	//对dom进行mouseout事件捕获
					$(this).toggleClass("over");	//移除css样式
				});

//采用此种方法调试后和上面的直接调用在数量上没区别
//				$(".contable tbody tr").mouseover(function(e){	//采用event事件方式对返回的dom进行mouseowver事件捕获
//					$(e.currentTarget).addClass("over");	//对捕获的事件e的当前对象进行绑定并添加css样式
//				}).mouseout(function(e){	//采用event事件方式对返回dom进行mouseout事件捕获
//					$(e.currentTarget).removeClass("over");	//对捕获的事件e的当前对象进行绑定并移除css样式
//				});

				$("#pagebar a").click(function(e){	//对分页栏中的a元素进行操作
					e.preventDefault();	//阻止a的原先事件
					vi($(this).attr("id"));	//根据获取的页码值调用显示页面函数
				});
				$("#page_go").click(function(e){	//对分页栏中的input元素进行操作
					e.preventDefault();
					if (isNaN($("#page_val").val())){	//判断输入的是否是数字
						alert("输入的页码错误，请输入正确页码！");
						$("#page_val").select();
						return false;	//页码值不是数字则退出；
					}
					vi($("#page_val").val());
				});
				var chk=$(".contable .checkid");
				$("#checkall").click(function(){
					chk.attr("checked",$(this).attr("checked"));	//根据全选的checkbox状态来填充单个checkbox状态
					$(this).attr("checked") ? chk.closest("tr").addClass("chk") : chk.closest("tr").removeClass("chk")	//判断是否全部选中，选中则增加chk样式，没选中则删除chk样式，不能用toggleClass方法，由于下面单个checkbox会改变全选的checkbox状态
				});
				chk.click(function(){
					if(!$(this).attr("checked")) $("#checkall").attr("checked",false);	//如果当前checkbox状态为未选中则全选的checkbox也设置为未选中
					$(this).closest("tr").toggleClass("chk");	//单个切换当前checkbox存在的tr的chk样式
				});
			});

		}
		$("#ss").click(function(){
				vi(p);
			});

	});
</script>
</head>
<body>
	<form id="cbsearch" name="cbsearch">
		<div class="ud">
			<table>
				<tr>
					<td rowspan="2">查询：</td>
					<td>
						<input type="text" name="sch" id="sch" />
						货单日期
						<input name="ksrq" id="ksrq" class="datepicker" type="text" size="10" maxlength="10" />-<input name="jsrq" id="jsrq" class="datepicker" type="text" size="10" maxlength="10" />
						报账时间
						<input name="kssj" id="kssj" class="datepicker" type="text" size="10" maxlength="10" />-<input name="jssj" id="jssj" class="datepicker" type="text" size="10" maxlength="10" />
					</td>
					<td rowspan="2"><input id="ss" type="button" name="ss" value="搜 索" /></td>
				</tr>
				<tr>
					<td>
						<span id="cha"></span>
						<select name="baozhang">
							<option value="">全部</option>
							<option value="true">报账</option>
							<option value="false">未报账</option>
						</select>
						<select name="pc">
							<option value="25">25</option>
							<option value="100">100</option>
						</select>
						<select name="xx">
							<option value="">全部</option>
							<option value="20">20</option>
							<option value="40">40</option>
							<option value="45">45</option>
						</select>
					</td>
				</tr>
			</table>
		</div>
	</form>
	<br />
	<div id="loading"><img src="lib/ajax-loader.gif" /></div>
	<div id="cbsearch_main"></div>
</body>
</html>
